<script lang="ts">
export default {
  name: "root_role"
}
</script>
<template>
  <div>
    <t-table row-key="id" :data="data.RoleAllList" :columns="RoleTableColumns"
             bordered hover stripe paginationAffixedBottom size="small"
             :loading="data.Loading" tableLayout="auto" :pagination="{
               pageSize:data.RoleAllListPagination.pageSize,
               current:data.RoleAllListPagination.current,
               total:data.RoleAllListPagination.total,
               pageSizeOptions:[10,20,30,50,100,200,300,500,1000]
               }" @page-change="onPageChange" @sort-change="onSortChange">
      <template #cmd="db">
        <t-space>
          <RoleMenu v-if="db.row.id > 2" :id="db.row.id"/>
        </t-space>
      </template>
      <template #topContent>
        <t-space style="margin-bottom: 0.6em">
          <t-button @click="GetAllRoleList" theme="primary" size="small">
            <template #icon>
              <RefreshIcon/>
            </template>
            刷新列表
          </t-button>
          <t-button @click="ReloadCASBIN" theme="success" size="small">
            <template #icon>
              <SecuredIcon/>
            </template>
            重载权限并生效
          </t-button>
          <RoleCreate @success="GetAllRoleList"/>
        </t-space>
      </template>
    </t-table>
  </div>
</template>
<script lang="ts" setup>
import {onMounted, reactive} from "vue";
import api from "../../../api/api";
import RoleMenu from "./role/menu.vue"
import RoleCreate from "./role/create_role.vue"
import {RefreshIcon, SecuredIcon} from "tdesign-icons-vue-next";
import {PrimaryTableCol, PageInfo, SortInfo} from "tdesign-vue-next";
import {Role} from "../../../tool/types";
import NotificationPlugin from "tdesign-vue-next/es/notification/plugin";

const data = reactive({
  Loading: false,
  RoleAllList: new Array<Role>(),
  RoleAllListPagination: {
    total: 0,
    pageSize: 10,
    current: 1,
  }
})

const RoleTableColumns: Array<PrimaryTableCol> = [
  {
    colKey: 'id',
    align: 'center',
    width: '100',
    title: 'ID',
    sorter: true
  },
  {
    colKey: 'key',
    align: 'center',
    width: '200',
    title: '唯一标识'
  },
  {
    colKey: 'name',
    align: 'center',
    width: '500',
    title: '名称'
  },
  {
    colKey: 'cmd',
    title: '操作'
  }
]

const GetAllRoleList = async () => {
  data.Loading = true
  let res = await api.Root.Role.AllList()
  if (res != null) {
    data.RoleAllList = res.data
    data.RoleAllListPagination.total = data.RoleAllList.length
  }
  data.Loading = false
}

const ReloadCASBIN = async () => {
  let res = await api.Root.Role.ReloadCASBIN()
  if (res != null) {
    await NotificationPlugin.success({
      title: '完成',
      content: '服务器重新加载权限列表成功。'
    })
  }
}

const onPageChange = (val: PageInfo) => {
  data.RoleAllListPagination.current = val.current
  data.RoleAllListPagination.pageSize = val.pageSize
}

const onSortChange = (val: SortInfo) => {
  if (val === undefined) {
    GetAllRoleList()
    return
  }
  if (val.descending) {
    //倒序
    let temp = data.RoleAllList.sort((a, b) => {
      return b.id - a.id
    }) as Array<Role>
    data.RoleAllList = []
    data.RoleAllList = temp
  } else {
    //顺序
    let temp = data.RoleAllList.sort((a, b) => {
      return a.id - b.id
    }) as Array<Role>
    data.RoleAllList = []
    data.RoleAllList = temp
  }
}

onMounted(async () => {
  await GetAllRoleList()
})
</script>